<script setup>
import { BoxResize, BoxScroll } from "@ui/base"
//
</script>


<template>
    <div w-800 h-400 bg-red p-30 box-border overflow-auto lh-0>
        <BoxResize>
            <div w-full h-full bg-white></div>
            <div w-full h-full bg-pink></div>
            <div w-full h-full bg-amber></div>
            <div w-full h-full bg-blue></div>
        </BoxResize>
    </div>
    ---------------------------------------------
    <div w-800 h-400 bg-red p-10 overflow-auto box-border lh-0>
        <BoxResize direction="vertical">
            <div w-full h-full bg-white></div>
            <div w-full h-full bg-pink></div>
            <div w-full h-full bg-amber></div>
            <div w-full h-full bg-blue></div>
        </BoxResize>
    </div>
    ---------------------------------------------
    <div w-800 h-400>
        <BoxScroll>
            <BoxResize direction="vertical" class="">
                <div w-full h-full min-h-100 bg-white></div>
                <div w-full h-full min-h-100 bg-pink></div>
                <div w-full h-full min-h-100 bg-amber></div>
                <div w-full h-full min-h-100 bg-blue></div>
            </BoxResize>
        </BoxScroll>
    </div>
    ---------------------------------------------
    <div w-800 h-400>
        <BoxScroll>
            <BoxResize class="important-h-400" lock-box >
                <div w-full h-full min-w-100 bg-white></div>
                <div w-full h-full min-w-100 bg-pink></div>
            </BoxResize>
        </BoxScroll>
    </div>
</template>